<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 公司名 -->
        <treeTools :node-data="company" @addDepartment="addDepartment" />
        <hr>
        <el-tree
          :data="depts"
          default-expand-all
          :expand-on-click-node="false"
        ><template #default="{ data }">
          <treeTools
            :node-data="data"
            :is-root="true"
            @delDepartmentById="getDepartment"
            @addDepartment="addDepartment"
            @editDepartment="editDepartment"
          />
        </template>
        </el-tree>
      </el-card>
      <!-- 模态框 -->
      <dialogTools ref="dialogTools" :dialog-show.sync="dialogShow" :node-data="nodeData" @refreshData="getDepartment" />
    </div>
  </div>
</template>

<script>
// 获取企业的部门列表
import { getDepartment } from '@/api/departments'
// 树形转换函数
import { ListToTreeData } from '@/utils'
// 封装的el-tree组件
import treeTools from './components/tree-tools.vue'
import dialogTools from './components/dialog-tools.vue'
export default {
  components: {
    treeTools,
    dialogTools
  },
  data() {
    return {
      // 企业部门数据列表
      depts: [],
      // 公司名数据对象
      company: {
        name: '广州市小陈教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      // 模态框显示
      dialogShow: false,
      // 点击的当前部门数据
      nodeData: {}
    }
  },
  created() {
    // 获取部门列表数据
    this.getDepartment()
  },
  methods: {
    // 获取部门列表数据
    async getDepartment() {
      const { depts } = await getDepartment()
      // console.log(depts)
      // 改造数据  树形转换函数
      this.depts = ListToTreeData(depts, '')
      // console.log(this.depts)
    },
    // 添加部门
    addDepartment(nodeData) {
      // 当前点击的数据存到data中 传给模态框
      this.nodeData = nodeData
      // 显示模态框
      this.dialogShow = true
    },
    // 编辑部门
    async editDepartment(nodeData) {
      // 当前点击的数据存到data中 传给模态框
      this.nodeData = nodeData
      // 调用子组件方法
      await this.$refs.dialogTools.getDepartmentDetail(nodeData.id)
      // 显示模态框
      this.dialogShow = true
    }
  }
}
</script>

<style lang="scss">
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
  .optBtn {
    cursor: pointer;
  }
}
</style>
